<!-- ArticleNavigation.vue -->
<template>
  <div class="article-navigation">
    <router-link
      v-if="articleInfo?.prevArticle"
      :to="`/detail/${articleInfo.prevArticleSlug}?id=${articleInfo.prevArticle}`"
      class="nav-item prev box-radius"
      target="_blank"
    >
      <div class="nav-label">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        <span>上一篇</span>
      </div>
      <div class="nav-title" :title="articleInfo.prevArticleTitle">{{ articleInfo.prevArticleTitle }}</div>
    </router-link>

    <div v-else class="nav-item prev placeholder box-radius">
      <div class="nav-label">已是第一篇</div>
    </div>

    <router-link
      v-if="articleInfo?.nextArticle"
      :to="`/detail/${articleInfo.nextArticleSlug}?id=${articleInfo.nextArticle}`"
      class="nav-item next box-radius"
      target="_blank"
    >
      <div class="nav-label">
        <span>下一篇</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </div>
      <div class="nav-title" :title="articleInfo.nextArticleTitle">{{ articleInfo.nextArticleTitle }}</div>
    </router-link>

    <!-- 占位元素，当没有上一篇或下一篇时保持布局 -->
    <div v-else class="nav-item next placeholder box-radius">
      <div class="nav-label">已是最后一篇</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ArticleInfo } from '@/types/article.ts';

defineProps<{
  articleInfo?: ArticleInfo;
}>();
</script>

<style scoped lang="less">
.article-navigation {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 60px;
  padding: 0 40px;

  .nav-item {
    flex: 1;
    padding: 20px 24px;
    background: #fff;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    text-decoration: none;
    min-width: 0; // 防止文本溢出

    &:not(.placeholder):hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border-color: #60a5fa;

      .nav-label {
        color: #60a5fa;

        svg {
          stroke: #60a5fa;
        }
      }

      .nav-title {
        color: #60a5fa;
      }
    }

    &.prev {
      text-align: left;
    }

    &.next {
      text-align: right;
    }

    .nav-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #666;
      margin-bottom: 10px;
      font-size: 14px;

      svg {
        width: 16px;
        height: 16px;
        stroke: #666;
        transition: all 0.3s ease;
      }
    }

    .nav-title {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: color 0.3s ease;
      line-height: 1.4;
    }

    &.next .nav-label {
      justify-content: flex-end;
    }

    &.placeholder {
      background: #f8f9fa;
      border: 1px dashed #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;

      .nav-label {
        margin: 0;
        color: #999;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .article-navigation {
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;

    .nav-item {
      padding: 16px 20px;

      &.prev, &.next {
        text-align: left;

        .nav-label {
          justify-content: flex-start;
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .article-navigation {
    padding: 0 16px;

    .nav-item {
      padding: 12px 16px;
    }
  }
}
</style>
